<template>
  <div
    class="at-step"
    :style="[style,  isLast ? '' : { marginRight: - $parent.stepOffset + 'px' }]"
    :class="['is-' + $parent.direction]">
    <div
      class="at-step__head"
      :class="['is-' + currentStatus, { 'is-text': !icon }]">
      <div
        class="at-step__line"
        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
        :class="['is-' + $parent.direction, { 'is-icon': icon }]">
        <i class="at-step__line-inner" :style="lineStyle"></i>
      </div>
      <span class="at-step__icon">
        <slot>
          <i v-if="icon" :class="['at-icon-' + icon]"></i>
          <div v-if="!icon">{{ index + 1 }}</div>
        </slot>
        <!-- <i
          v-else
          :class="['at-icon-' + (currentStatus === 'success' ? 'check' : 'close')]">
        </i> -->
      </span>
    </div>
    <div
      class="at-step__main"
      :style="{ marginLeft: mainOffset }">
      <div
        class="at-step__title"
        ref="title"
        :class="['is-' + currentStatus]">
        <slot name="title">{{ title }}</slot>
      </div>
      <div
        class="at-step__description"
        :class="['is-' + currentStatus]">
        <slot name="description">{{ description }}</slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AtStep',

  props: {
    title: String,
    icon: String,
    description: String,
    status: String
  },

  data() {
    return {
      index: -1,
      lineStyle: {},
      mainOffset: 0,
      internalStatus: ''
    };
  },

  beforeCreate() {
    this.$parent.steps.push(this);
  },

  beforeDestroy() {
    const steps = this.$parent.steps;
    const index = steps.indexOf(this);
    if (index >= 0) {
      steps.splice(index, 1);
    }
  },

  computed: {
    currentStatus() {
      return this.status || this.internalStatus;
    },
    isLast: function() {
      const parent = this.$parent;
      return parent.steps[parent.steps.length - 1] === this;
    },
    style: function() {
      const parent = this.$parent;
      const isCenter = parent.center;
      const len = parent.steps.length;

      if (isCenter && this.isLast) {
        return {};
      }

      const space = (typeof parent.space === 'number'
        ? parent.space + 'px'
        : parent.space
          ? parent.space
          : 100 / (isCenter ? len - 1 : len) + '%');
      if (parent.direction === 'horizontal') {
        return { width: space };
      } else {
        if (!this.isLast) {
          return { height: space };
        }
      }
    }
  },

  methods: {
    updateStatus(val) {
      const prevChild = this.$parent.$children[this.index - 1];

      if (val > this.index) {
        this.internalStatus = this.$parent.finishStatus;
      } else if (val === this.index) {
        this.internalStatus = this.$parent.processStatus;
      } else {
        this.internalStatus = 'wait';
      }

      if (prevChild) prevChild.calcProgress(this.internalStatus);
    },

    calcProgress(status) {
      let step = 100;
      const style = {};

      style.transitionDelay = 150 * this.index + 'ms';
      if (status === this.$parent.processStatus) {
        step = 50;
      } else if (status === 'wait') {
        step = 0;
        style.transitionDelay = (-150 * this.index) + 'ms';
      }

      style.borderWidth = step ? '1px' : 0;
      this.$parent.direction === 'vertical'
        ? style.height = step + '%'
        : style.width = step + '%';

      this.lineStyle = style;
    }
  },

  mounted() {
    const parent = this.$parent;

    if (parent.direction === 'horizontal') {
      if (parent.alignCenter) {
        this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
      }
    }

    const unwatch = this.$watch('index', val => {
      this.$watch('$parent.active', this.updateStatus, { immediate: true });
      unwatch();
    });
  }
};
</script>
<style>
  .at-step.is-horizontal,
.at-step.is-vertical .at-step__head,
.at-step.is-vertical .at-step__main,
.at-step__line {
  display: inline-block
}

.at-step {
  position: relative;
  vertical-align: top
}

.at-step:last-child .at-step__main {
  padding-right: 0
}

.at-step.is-vertical .at-step__main {
  padding-left: 10px
}

.at-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #d8dee7
}

.at-step__line.is-vertical {
  width: 2px;
  box-sizing: border-box;
  top: 48px;
  bottom: 0;
  left: 23px
}

.at-step__line.is-horizontal {
  top: 15px;
  height: 2px;
  left: 32px;
  right: 0
}

.at-step__line.is-icon.is-horizontal {
  right: 4px
}

.at-step__line-inner {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  transition: all 150ms;
  box-sizing: border-box;
  width: 0;
  height: 0
}

.at-step__icon {
  display: block;
  line-height: 28px
}

.at-step__icon>* {
  line-height: inherit;
  vertical-align: middle
}

.at-step__head {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: transparent;
  text-align: center;
  line-height: 28px;
  font-size: 28px;
  vertical-align: top;
  transition: all 150ms
}

.at-step__head.is-finish {
  color: #20a0ff;
  border-color: #20a0ff
}

.at-step__head.is-error {
  color: #ff4949;
  border-color: #ff4949
}

.at-step__head.is-success {
  color: #4990ff;
  border-color: #4990ff
}

.at-step__head.is-process{
  color: #4990ff;
  border-color: #4990ff
}
.at-step__head.is-wait{
  color: #bfcbd9;
  border-color: #bfcbd9
}
.at-step__head.is-text {
  font-size: 12px;
  border-width: 2px;
  border-style: solid
}

.at-step__head.is-text.is-finish {
  color: #4990ff;
  border-color: #4990ff;
}

.at-step__head.is-text.is-error {
  color: #fff;
  background-color: #ff4949;
  border-color: #ff4949
}

.at-step__head.is-text.is-success {
  color: #fff;
  background-color: #13ce66;
  border-color: #13ce66
}

.at-step__head.is-text.is-wait {
  color: #bfcbd9;
  background-color: #fff;
  border-color: #bfcbd9
}

.at-step__head.is-text.is-process {
  color: #fff;
  background-color: #bfcbd9;
  border-color: #bfcbd9
}

.at-step__main {
  white-space: normal;
  padding-right: 10px;
  text-align: left
}

.at-step__title {
  font-size: 12px;
  line-height: 32px;
  display: inline-block
}

.at-step__title.is-finish {
  color: #4990ff
}

.at-step__title.is-error {
  font-weight: 700;
  color: #ff4949
}

.at-step__title.is-success {
  font-weight: 700;
  color: #13ce66
}

.at-step__title.is-wait {
  font-weight: 400;
  color: #8992a7
}

.at-step__title.is-process {
  font-weight: 700;
  color: #48576a
}

.at-step__description {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px
}

.at-step__description.is-finish {
  color: #20a0ff
}

.at-step__description.is-error {
  color: #ff4949
}

.at-step__description.is-success {
  color: #4990ff
}

.at-step__description.is-wait {
  color: #8992a7
}

.at-step__description.is-process {
  color: #4990ff
}
.at-step__head.is-text.is-success {
  color: #4990ff;
  background-color: #FFFFFF;
  border-color: #4990ff;
}
.at-step__head.is-text {
  font-size: 14px;
  border-width: 1px;
  border-style: solid;  
}
.at-step__head {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: transparent;
}
.at-step__line.is-horizontal {
  top: 23px;
  height: 1px;
  left: 50px;
  right: 4px;
}
.at-step__line-inner {
  display: block;
  border-style: solid;
  border-color: inherit;
  transition: all 150ms;
  height: 0;
  transition-delay: 0ms !important;
  border-width: 0px!important;
  width: 100%;
}
.at-step__icon {
  width: 46px;
  height: 46px;
  display: block;
  line-height: 44px;
}
.at-step__title.is-success {
  font-weight: 500;
  color: #4990ff;
}
.at-step__title {
  font-size: 12px;
  line-height: 32px;
  display: inline-block;
  margin: 5px;
}
.at-step__title.is-process {
  font-weight: 500;
  color: #4990FF;
}
.at-step__head.is-text.is-process {
  color: #FFFFFF;
  background-color: white;
  border-color: #4990ff;
  width: 46px;height: 46px;
}
.at-step__head.is-text.is-process .at-step__icon {
  width: 40px;
  height: 40px;
  display: block;
  background-color: #4990ff;
  border-radius: 50%;
  line-height: 40px;
  margin: 3px;
}
</style>
